<template>
  <div class="table-card">
    <!-- 表头部分 -->
    <div class="table-header">
      <!-- 实际数据部分 -->
      <div class="header-section">
        <div class="header-main">
          <div class="header-cell main-bg center-cell main-title">TOP 10</div>
          <div class="header-cell main-bg center-cell main-title">标示</div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">排名</div>
            <div class="header-cell main-bg">公司名称</div>
          </div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">实际</div>
            <div class="sub-header-group">
              <div class="header-cell">间夜</div>
              <div class="header-cell">占比</div>
              <div class="header-cell">收入</div>
              <div class="header-cell">占比</div>
              <div class="header-cell">ADR</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 去年数据部分 -->
      <div class="header-section">
        <div class="header-main">
          <div class="header-cell main-bg center-cell main-title">TOP 10</div>
          <div class="header-cell main-bg center-cell main-title">标示</div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">排名</div>
            <div class="header-cell main-bg">公司名称</div>
          </div>
          <div class="header-group">
            <div class="header-cell main-bg" style="margin-bottom: 5px">去年</div>
            <div class="sub-header-group">
              <div class="header-cell">间夜</div>
              <div class="header-cell">占比</div>
              <div class="header-cell">收入</div>
              <div class="header-cell">占比</div>
              <div class="header-cell">ADR</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格内容 -->
    <div class="table-body">
      <template v-if="loading">
        <div class="loading-wrapper">
          <a-spin />
        </div>
      </template>
      <template v-else>
        <div v-for="(row, index) in tableData" :key="index" class="table-row">
          <!-- 实际数据部分 -->
          <div class="row-section">
            <div class="row-cell rank-cell">{{ row.companyIndex }}</div>
            <div class="row-cell tag-cell">
              <div class="tag-indicator" :style="{ backgroundColor: getCompanyColor(row.companyName) }"></div>
            </div>
            <div class="row-cell company-name">{{ row.companyName }}</div>
            <div class="data-cells">
              <div class="row-cell">{{ formatRoom(row.room) }}</div>
              <div class="row-cell">{{ formatRate(row.roomRate) }}</div>
              <div class="row-cell">{{ formatIncome(row.income) }}</div>
              <div class="row-cell">{{ formatRate(row.incomeRate) }}</div>
              <div class="row-cell">{{ formatPrice(row.price) }}</div>
            </div>
          </div>
          <!-- 去年数据部分 -->
          <div class="row-section">
            <div class="row-cell rank-cell">{{ row.companyIndex }}</div>
            <div class="row-cell tag-cell">
              <div class="tag-indicator" :style="{ backgroundColor: getCompanyColor(row.companyName) }"></div>
            </div>
            <div class="row-cell company-name">{{ row.companyName }}</div>
            <div class="data-cells">
              <div class="row-cell">{{ formatRoom(row.lRoom) }}</div>
              <div class="row-cell">{{ formatRate(row.lRoomRate) }}</div>
              <div class="row-cell">{{ formatIncome(row.lIncome) }}</div>
              <div class="row-cell">{{ formatRate(row.lIncomeRate) }}</div>
              <div class="row-cell">{{ formatPrice(row.lPrice) }}</div>
            </div>
          </div>
        </div>
      </template>

      <!-- 汇总行 -->
      <div v-if="summaryData && summaryData.length && tableData && tableData.length" class="table-footer">
        <div v-for="(row, index) in summaryData" :key="index" class="table-row">
          <div class="row-section">
            <div class="summary-section">
              <div class="row-cell summary-cell">{{ row.companyName }}</div>
            </div>
            <div class="data-cells">
              <div class="row-cell">{{ row.room }}</div>
              <div class="row-cell">{{ row.roomRate }}</div>
              <div class="row-cell">{{ row.income }}</div>
              <div class="row-cell">{{ row.incomeRate }}</div>
              <div class="row-cell">{{ row.price }}</div>
            </div>
          </div>
          <div class="row-section">
            <div class="summary-section">
              <div class="row-cell summary-cell">{{ row.lCompanyName }}</div>
            </div>
            <div class="data-cells">
              <div class="row-cell">{{ row.lRoom }}</div>
              <div class="row-cell">{{ row.lRoomRate }}</div>
              <div class="row-cell">{{ row.lIncome }}</div>
              <div class="row-cell">{{ row.lIncomeRate }}</div>
              <div class="row-cell">{{ row.lPrice }}</div>
            </div>
          </div>
        </div>
      </div>

      <div v-if="!tableData || !tableData.length" class="no-data">
        <img class="no-data-img" src="/@/assets/images/nodata.png" />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { computed } from 'vue';
  import * as MathUtil from '/@/utils/MathUtil';

  // Props定义
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    dataList: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    summary: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });
  const ColorSign = ['#53498E', '#3470C5', '#498E86', '#9E9A34', '#8E5E49', '#8A3679', '#A81C41', '#CC670E', '#828873', '#DCDCE1'];
  // 计算属性
  const tableData = computed(() => props.dataList || []);
  const summaryData = computed(() => {
    if (!props.summary) return [];
    if (typeof props.summary === 'function') {
      return (props.summary as Function)() || [];
    }
    return props.summary;
  });

  // 格式化方法
  const formatRoom = (value: any) => {
    if (value === undefined || value === null) return '-';
    return MathUtil.dot2Formatter(Number(value), 0);
  };

  const formatPrice = (value: any) => {
    if (value === undefined || value === null) return '-';
    return MathUtil.dot2Formatter(Number(value), 0);
  };

  const formatIncome = (value: any) => {
    if (value === undefined || value === null) return '-';
    return value;
  };

  const formatRate = (value: any) => {
    if (value === undefined || value === null) return '-';
    return MathUtil.percent2DFormatter(Number(value), 1);
  };

  // 获取公司的颜色标示
  const getCompanyColor = (companyName: string) => {
    if (!companyName) return ColorSign[9]; // 默认颜色
    const uniqueCompanies = new Set();
    let colorIndex = 0;

    // 遍历所有数据找到唯一的公司
    props.dataList.forEach((item) => {
      if (item.companyName && !uniqueCompanies.has(item.companyName)) {
        uniqueCompanies.add(item.companyName);
        if (item.companyName === companyName) {
          colorIndex = uniqueCompanies.size - 1;
        }
      }
    });

    return ColorSign[colorIndex % ColorSign.length];
  };
</script>

<style lang="less" scoped>
  .table-card {
    width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    height: 100%;
    flex-grow: 1; /* 填充剩余空间 */
  }

  .table-header {
    display: flex;
    gap: 20px;
    margin-bottom: 5px;

    .header-section {
      flex: 1;

      .header-main {
        display: grid;
        grid-template-columns: 60px 60px 180px 1fr;
        gap: 10px;
        background: #fff;

        .center-cell {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 32px;
        }
      }

      .header-cell {
        padding: 8px;
        text-align: center;
        font-size: 12px;
        color: #1d2129;
        background: #f7f5f4;
        height: 32px;
        line-height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;

        &.main-bg {
          background: #d3cee2;
          font-weight: 600;
        }
      }
      .main-title {
        height: 100% !important;
      }
      .header-group {
        .sub-header-group {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
        }
      }
    }
  }

  .table-body {
    .table-row {
      display: flex;
      gap: 20px;
      margin-bottom: 1px;

      .row-section {
        flex: 1;
        display: grid;
        grid-template-columns: 60px 60px 180px 1fr;
        gap: 10px;

        .rank-cell {
          background: #d3cee2 !important;
        }

        .tag-cell {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .data-cells {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
        }

        .row-cell {
          padding: 8px;
          text-align: center;
          font-size: 12px;
          color: #1d2129;
          background: #f7f5f4;
          height: 32px;
          line-height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          // white-space: nowrap;

          &.company-name {
            text-align: left;
            justify-content: flex-start;
          }
        }
      }
    }
  }

  .table-footer {
    margin-top: 20px;
    border-top: 1px solid #e5e6eb;
    padding-top: 20px;

    .table-row {
      .row-section {
        .summary-section {
          grid-column: span 3;
        }

        .summary-cell {
          text-align: left;
          justify-content: flex-start;
          font-weight: 600;
          background: #d3cee2;
        }
      }
    }
  }

  .loading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .tag-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  // 虚线分隔
  .table-row {
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px dashed #e5e6eb;
    }
  }

  .no-data {
    text-align: center;
    padding: 20px 0;

    &-img {
      width: 120px;
      height: 120px;
    }

    p {
      margin-top: 8px;
      color: #999;
      font-size: 12px;
    }
  }
</style>
